<template>
  <div class="music-library-container">
    <div class="library-header">
      <h1>音乐库</h1>
      <div class="search-bar">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索歌曲、专辑或艺术家..."
          @input="handleSearch"
        />
      </div>
    </div>

    <div class="library-content">
      <div class="filters">
        <select v-model="selectedFilter" @change="handleFilterChange">
          <option value="all">全部</option>
          <option value="songs">歌曲</option>
          <option value="albums">专辑</option>
          <option value="artists">艺术家</option>
        </select>
      </div>

      <div class="items-grid">
        <div v-for="item in filteredItems" :key="item.id" class="item-card">
          <div class="item-image">
            <img :src="item.image || '/default-album.png'" :alt="item.name" />
          </div>
          <div class="item-info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.type === 'song' ? item.artist : item.type }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  name: 'MusicLibraryView',
  setup() {
    const searchQuery = ref('')
    const selectedFilter = ref('all')

    // 模拟数据
    const items = ref([
      {
        id: 1,
        name: '示例歌曲 1',
        type: 'song',
        artist: '艺术家 1',
        image: null,
      },
      {
        id: 2,
        name: '示例专辑 1',
        type: 'album',
        image: null,
      },
      {
        id: 3,
        name: '艺术家 1',
        type: 'artist',
        image: null,
      },
    ])

    const filteredItems = computed(() => {
      let filtered = items.value

      if (selectedFilter.value !== 'all') {
        filtered = filtered.filter((item) => item.type === selectedFilter.value)
      }

      if (searchQuery.value) {
        const query = searchQuery.value.toLowerCase()
        filtered = filtered.filter(
          (item) =>
            item.name.toLowerCase().includes(query) ||
            (item.artist && item.artist.toLowerCase().includes(query)),
        )
      }

      return filtered
    })

    const handleSearch = () => {
      // 实现搜索逻辑
    }

    const handleFilterChange = () => {
      // 实现筛选逻辑
    }

    return {
      searchQuery,
      selectedFilter,
      filteredItems,
      handleSearch,
      handleFilterChange,
    }
  },
}
</script>

<style scoped>
.music-library-container {
  padding: 2rem;
}

.library-header {
  margin-bottom: 2rem;
}

h1 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.search-bar {
  margin-bottom: 1rem;
}

.search-bar input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.filters {
  margin-bottom: 1.5rem;
}

.filters select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.5rem;
}

.item-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.item-card:hover {
  transform: translateY(-4px);
}

.item-image {
  width: 100%;
  padding-top: 100%;
  position: relative;
  background-color: #f5f5f5;
}

.item-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-info {
  padding: 1rem;
}

.item-info h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c3e50;
}

.item-info p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  color: #666;
}
</style>
